<template>
	<view class="shopping_deta">
		<Navbar>商品详情</Navbar>
		<scroll-view scroll-y class="scroll_view">
			<view class="cover">
				<image :src="cover"></image>
			</view>
			<view class="content">
				<view class="info">
					<view class="name">{{name}}</view>
					<view class="desc">{{synopsis}}</view>
					<view class="price">
						<view v-if="price>0">
							<text class="unit">￥</text>
							<!-- <image :src="`${baseImageUrl}/common/gy.png`" class="price_icon"></image> -->
							<text>{{price}}</text>
						</view>
						<view v-if="price_silver>0">
							<image :src="`${baseImageUrl}/common/gy.png`" class="price_icon"></image>
							<!-- <image :src="`${baseImageUrl}/add/s1.png`"></image> -->
							<text>{{price_silver}}</text>
						</view>
					</view>
				</view>
				<view class="sub_title">
					<image :src="`${baseImageUrl}/add/s3.png`"></image>
					<text>商品详情</text>
				</view>
				<view class="u_parse">
					<u-parse :content="content" :previewImg="false"></u-parse>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="price">
				<view v-if="price>0">
					<text class="unit">￥</text>
					<!-- <image :src="`${baseImageUrl}/common/gy.png`" class="price_icon"></image> -->
					<text>{{price}}</text>
				</view>
				<view v-if="price_silver>0">
					<!-- <image :src="`${baseImageUrl}/add/s1.png`"></image> -->
					<image :src="`${baseImageUrl}/common/gy.png`" class="price_icon"></image>
					<text>{{price_silver}}</text>
				</view>
			</view>
			<view class="btn" @click="submit">立即购买</view>
		</view>
		<u-popup :show="show" mode="bottom" :round="10">
			<ShoppingType :cover="cover" :name="name" :stock="stock" @close="show=false" @confirm="confirm" />
		</u-popup>
	</view>
</template>

<script>
	import {
		shopProductInfo
	} from '@/request/api.js';
	import ShoppingType from "@/components/home/ShoppingType.vue";
	export default {
		components: {
			ShoppingType
		},
		data() {
			return {
				id: null,
				cover: "",
				name: "",
				synopsis: "",
				price: "",
				price_silver: "",
				content: "",

				stock: 0,

				show: false
			}
		},
		async onLoad(options) {
			let id = this.id = options.id;
			let {
				info
			} = await shopProductInfo({
				id
			});
			this.cover = info.cover;
			this.name = info.name;
			this.synopsis = info.synopsis;
			this.price = info.price;
			this.price_silver = info.price_silver;
			this.content = info.content;
			this.stock = info.stock;
		},
		methods: {
			submit() {
				this.show = true;
			},
			confirm(number) {
				this.show = false;
				this.router(`/pages/shopping/order?id=${this.id}&n=${number}`);
			}
		}
	}
</script>

<style scoped lang="scss">
	$footerHeight: 157rpx;

	.shopping_deta {
		height: 100vh;
		background: #29170D;

		.scroll_view {
			height: calc(100vh - #{$navbarHeight} - #{$footerHeight});

			.cover {
				width: 100%;
				height: 730rpx;
				padding: 80rpx 74rpx 50rpx 76rpx;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/add/bg3.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content {
				padding: 0 30rpx;
				box-sizing: border-box;

				.info {
					width: 100%;
					min-height: 240rpx;
					padding: 40rpx 30rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/add/s2.png) no-repeat;
					background-size: 100% 100%;

					.name {
						color: #494338;
						font-size: 50rpx;
						font-weight: 400;
						font-family: LiSu;
					}

					.desc {
						color: #494338;
						font-size: 24rpx;
						padding-top: 20rpx;
						padding-bottom: 30rpx;
					}

					.price {
						display: flex;
						align-items: center;

						&>view {
							display: flex;
							align-items: center;

							&:first-child {
								margin-right: 10rpx;
							}

							image {
								width: 56rpx;
								height: 56rpx;

								&.price_icon {
									width: 48rpx;
									height: 48rpx;
								}
							}

							.unit {
								color: #494338;
								font-size: 30rpx;
								font-weight: 400;
								font-family: LiSu;
							}

							text {
								color: #494338;
								font-size: 50rpx;
								font-weight: 400;
								font-family: LiSu;
								padding-left: 6rpx;
								box-sizing: border-box;
							}
						}
					}
				}

				.sub_title {
					padding: 40rpx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					text {
						color: rgba(255, 255, 255, 0.5);
						font-size: 32rpx;
						font-weight: 400;
						font-family: SimSun;
						padding-left: 12rpx;
						box-sizing: border-box;
					}
				}

				.u_parse {
					color: #fff;
					font-family: SimSun;
				}
			}
		}

		.footer {
			width: 100%;
			height: $footerHeight;
			background: #29170D;
			border-top: 2px solid #BC8478;
			padding: 14rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.price {
				height: 50rpx;
				display: flex;
				align-items: center;

				* {
					margin-right: 10rpx;
				}

				&>view {
					display: flex;
					align-items: center;

					.unit {
						color: #fff;
						font-size: 50rpx;
						font-weight: 400;
						font-family: LiSu;
					}

					image {
						width: 56rpx;
						height: 56rpx;

						&.price_icon {
							width: 48rpx;
							height: 48rpx;
						}
					}

					text {
						color: #fff;
						font-size: 50rpx;
						font-weight: 400;
						font-family: LiSu;
					}
				}
			}

			.btn {
				width: 210rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 400;
				font-family: SimSun;
				background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
				background-size: 100% 100%;

				&.not {
					background: url(#{$baseImageUrl}/common/btn2.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>